<script>
/**
 * @property {Boolean} filtercolumns 是否显示过滤列
 * @property {Array} columns 列数据
 * @property {Object | Boolean} pagination 分页配置项
 * @property {String | Number} iconSize 右上角图标大小
 * @property {Boolean} fullscreen 是否显示全屏按钮
 * @property {Function} export 导出回调
 * @method getSelectColumn 设置要显示的列
 * @method exportData(name:String) 导出表格数据：param:{name:文件名}
 * @slot filter 过滤搜索
 * @slot operation 操作容器
 */
import filterIconSelected from './images/filterSelected.png';
import filterIcon from './images/filter.png';
import exportIcon from './images/export.png';
import refreshIcon from './images/refresh.png';
import filterFieldsIcon from './images/filterFields.png';
import exportMixin from './exportMixin';
export default {
  name: 'rj-table',
  inheritAttrs: false,
  mixins: [exportMixin],
  props: {
    filtercolumns: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: [Object, Boolean],
    },
    iconSize: {
      type: [String, Number],
      default: 14,
    },
    export: Function,
  },
  data() {
    return {
      columnsData: this.columns,
      selectColumnsData: [],
      showFilterSearch: false,
    };
  },

  render() {
    const defaultPagination = {
      showTotal: (total) => {
        return this.$t('components.rjTable.totalRecords', { num: total });
      },
      showQuickJumper: true,
      showSizeChanger: true,
    };

    const on = {
      ...this.$listeners,
    };
    //合并分页参数
    const props = {
      // scroll: { x: true },
      ...this.$attrs,
      pagination:
        typeof this.pagination == 'boolean'
          ? this.pagination
          : { ...defaultPagination, ...this.pagination },
    };
    let customEleSlot;
    // slots循环
    const slots = Object.keys(this.$slots).map((slot) => {
      if (slot != 'customBlock') {
        return <template slot={slot}>{this.$slots[slot]}</template>;
      } else {
        customEleSlot = this.$slots[slot];
      }
    });
    const table = (
      <a-table
        bordered
        size="middle"
        props={props}
        columns={this.selectColumnsData}
        scopedSlots={this.$scopedSlots}
        on={on}
      >
        {slots}
      </a-table>
    );
    const columnsList = this.columns.map((item) => {
      return (
        <p key={item.title}>
          <a-checkbox
            checked={item.showColumn != false}
            onClick={(e) => this.changeColums(item, e)}
          >
            {item.title || item.key}
          </a-checkbox>
        </p>
      );
    });

    // 带有文字提示的图标
    const toolTipIcon = (tip, Icon) => (
      <a-tooltip title={tip}>{Icon}</a-tooltip>
    );

    // 表格右上角操作布局
    const operateLayout = (
      <a-space class="table-operate" size={10}>
        {this.$listeners.refeshTable &&
          toolTipIcon(
            this.$t('components.rjTable.refreshIcon'),
            <img
              onClick={() => this.triggerTableRefresh()}
              class="icon-pointer"
              src={refreshIcon}
              width={this.iconSize}
            />
          )}

        {this.export &&
          toolTipIcon(
            this.$t('components.rjTable.exportIcon'),
            <img
              class="icon-pointer"
              onClick={() => this.export()}
              src={exportIcon}
              width={this.iconSize}
            />
          )}
        {this.filtercolumns &&
          toolTipIcon(
            this.$t('components.rjTable.filterIcon'),
            <a-popover
              placement="bottomRight"
              overlayClassName="table-popover"
              title={this.$t('components.rjTable.filterColumnIcon')}
              trigger="click"
            >
              <template slot="content">{columnsList}</template>
              <img
                src={filterFieldsIcon}
                class="icon-pointer"
                width={this.iconSize + 12}
              />
            </a-popover>
          )}
      </a-space>
    );
    // 过滤搜索
    const filterSearch = this.$slots.filter && (
      <div class="mb-10">
        <div class="flex row-right">
          <div
            class="flex"
            style="cursor: pointer"
            onClick={() => (this.showFilterSearch = !this.showFilterSearch)}
          >
            <span
              style={{
                color: this.showFilterSearch ? '#265FFD' : '#818181',
              }}
            >
              {this.$t('components.rjTable.filter')}
            </span>
            <img
              src={this.showFilterSearch ? filterIconSelected : filterIcon}
              class="ml-10"
              width="17"
            />
          </div>
        </div>
        {this.showFilterSearch && this.$slots.filter}
      </div>
    );
    return (
      <div class="rj-table-warpper">
        {operateLayout}
        {this.$slots.operation}
        {filterSearch}
        {customEleSlot || ''}
        {table}
      </div>
    );
  },

  computed: {
    // 右上角图标样式
    iconStyle() {
      let iconSizeType = typeof this.iconSize;
      let iconSize = { ...this.iconSize };
      if (iconSizeType == 'number') {
        return { fontSize: `${this.iconSize}px` };
      } else {
        return {
          fontSize: iconSize.includes('px') ? iconSize : `${iconSize}px`,
        };
      }
    },
  },

  watch: {
    columns() {
      this.columnsData = this.columns;
    },

    columnsData: {
      handler: function () {
        this.getSelectColumn();
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    getSelectColumn() {
      const currentSelectColums = this.columns.filter((item) => {
        return item.showColumn != false;
      });
      this.selectColumnsData = [...currentSelectColums];
    },
    triggerTableRefresh() {
      this.$emit('refeshTable');
    },

    changeColums(info, e) {
      this.columnsData.forEach((item) => {
        if (item.key == info.key) {
          item.showColumn = e.target.checked;
        }
      });
      this.columnsData = [...this.columnsData];
      if (this.$listeners.changeSelectColums) {
        this.$nextTick(() => {
          this.$listeners.changeSelectColums(this.selectColumnsData);
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.rj-table-warpper {
  .table-operate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    .table-operate-icon {
      font-size: 18px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .table-operate-refresh,
  .table-operate-filter {
    color: @text2;
    &:hover {
      color: @btnColor2;
    }
  }
}
.table-popover {
  max-width: 180px;
  .ant-popover-inner-content {
    background: #fff;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .ant-popover-inner {
    width: 100%;
  }
}

::v-deep .ant-table-thead > tr > th {
  font-weight: 400;
  font-size: 16px;
}

.icon-pointer {
  cursor: pointer;
}
</style>
